<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>goodlist</title>
  <link rel="stylesheet" href="./stylesheets/commom.css">
  <link rel="stylesheet" href="./stylesheets/goodslist.css">
</head>

<body>
  <!-- 侧边栏 -->
  <div id="box">
    <div class="box_t">
      <span><i></i>在线咨询</span>
    </div>
    <div class="box_b">
      <span><i></i>TOP</span>
    </div>
  </div>
  <!-- 通知部分notice -->
  <div id="notice">
    <div class="swiper-container swiper3">
      <div class="swiper-wrapper">
        <div class="swiper-slide ">即日起至5.20任购满520即享刻字礼遇，随单可选情人节定制卡片</div>
        <div class="swiper-slide">520限定礼盒上市,爱,就冲动这一次.#LOVE AT FIRST CLASH</div>
      </div>
    </div>
  </div>
  <!-- loge头部header -->
  <div id="header">
    <div class="header-top">
      <div class="h_t_left">
        <ul>
          <li><a class="a1" href="#">专柜查询</a></li>
          <li class="li2"><strong></strong><a href="#">客服中心</a>

            <!-- 二级菜单 -->
            <div id="service" class="service1">
              <div class="xj xj1"></div>
              <div class="s_left">
                <div class="title">我能帮到您什么？</div>
                <div class="s_left_ul">
                  <div><a href="#">常见问题</a></div>
                  <div><a href="#">订单跟踪</a></div>
                  <div><a href="#">订购信息</a></div>
                </div>
                <div class="s_left_ul">
                  <div><a href="#">选择我们的原因</a></div>
                  <div><a href="#">送货与退货</a></div>
                </div>
              </div>
              <div class="s_right">
                <div class="title">联系我们</div>
                <div class="s_left_ul">
                  <div><a href="#">400-820-6362(9:00-21:00)</a></div>
                  <div><a href="#">在线咨询</a></div>
                  <div><a href="#">我们提供一周七天服务</a></div>
                </div>
              </div>
            </div>
          </li>
        </ul>

      </div>
      <div class="h_t_right">
        <ul>
          <li class="h_t_journal"><a href="">订阅电子杂志</a>
            <div class="h_t_j_o"></div>

            <!-- 二级菜单 -->
            <div id="service" class="service2">
              <div class="xj xj2"></div>
              <div class="s_left">
                <div class="title">订阅圣罗兰电子杂志</div>
                <p class="s_t_p1">请输入您的邮箱</p>

                <div class="s_t_inpt">
                  <input type="text" >
                  <div class="s_t_p2">订阅</div>
                </div>
                <div class="s_t_agt">
                  <div class="checkbox"></div>
                  <p>我同意依照本<span>使用条款</span>和<span>隐私政策</span>对我的个人信息进行收集和使用；我已阅读并确认被给予充分机会理解该 <span>使用条款</span> 和
                    <span>隐私政策</span> 的内容。</p>
                </div>
              </div>
              <div class="s_right s_right_new">
                <div class="title">官网专享</div>
                <div><a href="#">立即成为圣罗兰美妆官网会员，尊享VIP独家礼遇。</a></div>
                <div class="s_left_ul">

                  <div><span></span> <a href="#">查看历史订单</a></div>
                  <div><span></span> <a href="#">官网独家礼赠</a></div>
                  <div><span></span> <a href="#">收藏您喜欢的产品</a></div>
                  <div><span></span> <a href="#">一手新品资讯</a></div>
                </div>
              </div>

            </div>

          </li>
          <li class="login"><a href="./login.html" id="loginreg">登录与注册</a>
            <div class="h_t_j_o"></div>
            <!-- 二级菜单 -->
            <div id="service" class="service4">
              <div class="xj xj4"></div>
              <div class="s_left">
                <div class="title">用户登录</div>
                <p class="s_t_p1">请输入您的邮箱</p>

                <div class="s_t_inpt">
                  <input type="text">
                  <div class="s_t_p2">订阅</div>
                </div>
                <div class="s_t_agt">
                  <div class="checkbox"></div>
                  <p>我同意依照本<span>使用条款</span>和<span>隐私政策</span>对我的个人信息进行收集和使用；我已阅读并确认被给予充分机会理解该 <span>使用条款</span> 和
                    <span>隐私政策</span> 的内容。</p>
                </div>
              </div>
              <div class="s_right s_right_new">
                <div class="title">官网专享</div>
                <div><a href="#">加入YSL官网的过程很简单, 您只需点击“立即注册”, 即可进入注册过程, 尊享会员专属权益。</a></div>
                <div class="s_left_ul">
                  <div><span></span><a href="#">查看历史订单</a></div>
                  <div><span></span><a href="#">官网独家礼赠</a></div>
                  <div><span></span><a href="#">收藏您喜欢的产品</a></div>
                  <div><span></span><a href="#">一手新品资讯</a></div>
                </div>
                <div class="btn_box">
                  <a href="#">立即注册</a>
                </div>
              </div>
            </div>


          </li>
          <li class="h_t_shopbags"> <strong></strong> <a href="" class="a_h" >购物袋<span>-0</span>件商品</a>
            <div class="h_t_h"></div>
            <!-- 购物袋 -->
            <div id="service" class="service3">
              <div class="xj xj3"></div>
              <div class="s_content">您的圣罗兰购物袋是空的. <br><span>马上添加您最喜欢圣罗兰的产品</span></div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <a href="#"><img src="./images/logo.png" alt="YSL圣罗兰美妆官方网站暨网上商城" title="YSL圣罗兰美妆官方网站暨网上商城"></a>
  </div>
  <!-- nav导航部分 -->
  <div id="nava">
    <div id="nav">
      <div class="nav_left">
        <ul>
          <li class="makeup"><a href="#">彩妆</a>
            <div class="m_xsj"></div>
            <!-- 二级菜单 -->
            <ul class="menu_2">
              <li><a href="#" class="menu_2_li">唇部</a>
                <ul>
                  <li><a href="#">唇膏</a></li>
                  <li><a href="#">唇部</a></li>
                  <li><a href="#">唇油</a></li>
                  <li><a href="#">唇夹霜</a></li>
                  <li><a href="#">唇釉</a></li>
                </ul>
              </li>
              <li><a href="#" class="menu_2_li">面部</a>
                <ul>
                  <li><a href="#">明彩笔</a></li>
                  <li><a href="#">妆前隔离</a></li>
                  <li><a href="#">粉饼</a></li>
                  <li><a href="#">蜜粉</a></li>
                  <li><a href="#">腮红</a></li>
                </ul>
              </li>
              <li><a href="#" class="menu_2_li">眼部</a>
                <ul>
                  <li><a href="#">唇膏</a></li>
                  <li><a href="#">唇部</a></li>
                  <li><a href="#">唇油</a></li>
                  <li><a href="#">唇夹霜</a></li>
                  <li><a href="#">唇釉</a></li>
                </ul>
              </li>
              <li><a href="#" class="menu_2_li">甲油</a></li>
              <li><a href="#" class="menu_2_li">套装及工具</a></li>

              <div class="ul_button">
                <div class="ul_button_a">
                  <div class="ul_button_left">
                    <div class="ul_button_left_l">
                      <span>热卖</span>
                      <img src="./images/nav1.jpg" alt="圣罗兰莹亮纯魅唇膏" title="圣罗兰莹亮纯魅唇膏">
                    </div>
                  </div>
                </div>
              </div>
            </ul>
          </li>

          <li><a href="#">护肤</a></li>
          <li><a href="#">香水</a></li>
          <li><a href="#">明星产品</a></li>
          <li><a href="#">520限定礼盒</a></li>
          <li><a href="#">会员中心</a></li>
          <li><a href="#">私人定制服务</a></li>
        </ul>
        <form action="">
          <input type="text" placeholder="YSL气垫" placeholder="YSL气垫" onfocus="this.placeholder=''" onblur="this.placeholder='YSL气垫'">
          <a href="#"><strong></strong></a>
        </form>
      </div>
    </div>
</div>
  <!-- banner轮播图部分 -->
  <div id="banner">
    <img src="./images/goodlist.jpg" alt="">
  </div>
  <!-- 列表区 goods-->
  <div id="goods">
    <div class="goods_l">
      <p class="goods_l_t">彩妆</p>
      <ul>
        <li><a href="#">唇部</a></li>
        <li><a href="#">面部</a></li>
        <li><a href="#">眼部</a></li>
        <li><a href="#">套装及工具</a></li>
      </ul>
      <div class="goods_color">
        <p class="g_c_title">色彩</p>
        <div class="g_c_line"></div>
        <div class="g_c_color">
          <ul>
            <li><a href="#"><span></span></a></li>
            <li><a href="#"><span></span></a></li>
            <li><a href="#"><span></span></a></li>
            <li><a href="#"><span></span></a></li>
            <li><a href="#"><span></span></a></li>
            <li><a href="#"><span></span></a></li>
            <li><a href="#"><span></span></a></li>
            <li><a href="#"><span></span></a></li>
            <li><a href="#"><span></span></a></li>
            <li><a href="#"><span></span></a></li>
            <li><a href="#"><span></span></a></li>
            <li><a href="#"><span></span></a></li>
            <li><a href="#"><span></span></a></li>
            <li><a href="#"><span></span></a></li>
            <li><a href="#"><span></span></a></li>
          </ul>
        </div>
        <div class="g_c_price">
          <p class="g_c_title">价格范围</p>
          <div class="g_c_line1"></div>
          <div class="g_c_line2"></div>
        </div>
      </div>
    </div>
    <div class="goods_r">
      <div class="goods_r_t">
        <div class="goods_r_t_left">
          <ul>
            <li><a href="./index.html">首页</a></li>
            <li><a href="#" class="current"></a></li>
          </ul>
        </div>

        <div class="goods_r_t_right">
          <p>51个商品</p>
          <div class="select_box">
            <p>
              <span>排序按照</span>
            </p>
            <span class="span_b"><span></span></span>
            <!-- 下拉菜单 -->
            <ul>
              <li><a href="#">人气推荐</a></li>
              <li><a href="#">按上市时间</a></li>
              <li><a href="#">按价格从高到低</a></li>
              <li><a href="#">按价格从低到高</a></li>
              <li><a href="#">按销量排序</a></li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 内容区 -->
      <div class="goods_r_c">
        <!-- <div class="goods_r_c_s" >
          <img
            src="https://t00img.yangkeduo.com/goods/images/2019-01-07/d7e160010193ccc6c96438aaafb585ca.jpeg@750w_1l_50Q.src"
            alt="" class="img">
          <p class="goods_r_c_s_p1">【40卷24卷10卷】5.5斤40卷 臻木本色卫生纸巾卷纸批发家用卷筒纸</p>
          <p class="goods_r_c_s_p2">
            <span>￥6.8</span>
            <span class="p2_span">￥28.8</span>
            <span>已团<span>3.3万</span>件</span>
          </p>
        </div> -->
      </div>
    </div>
  </div>
  <!-- 分页部分 -->
  <div id='page'>
    <ul id='ul'>
        <li>首页</li>
        <li>上一页</li>
        <li></li>
        <li></li>
        <li></li>
        <li>下一页</li>
        <li>尾页</li>
    </ul>
</div>
</body>
 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
<script src="./scripts/common.js"></script>
<script src="./scripts/goodslist.js"></script>
</html>